<!--招标-->
<template>
	<view class="bidding-page">
		<jhj-header class="page-header" @search-click="Showpopup" @getsearchdata="getsearchdata" @clearname="clearname"></jhj-header>
		<view class="content" v-if="!select">
				<view v-for="item in biddinglist" :key="item.id" @click="goDetailPage(item,index)" style="margin-top: 20rpx;">
					<bidding-list-item :itemData="item"></bidding-list-item>
				</view>
		</view>

		<view class="content" v-if="select">
			<view class="" v-for="(item,index) in searchList">
				<bidding-list-item :itemData="item"></bidding-list-item>
			</view>
		</view>

		<view class="propcenter" v-show="flag" @click="flagS"></view>
		<view class="prpop" v-show="flag">
			<div class="dabloue">
				<p>招标型位：</p>
				<span @click="lyclick(index1,item.name)" :class="index1 === index ? 'checkspan' : 'span'" v-for="(item, index1) in floor"
				 checked="item.selected" :key="index1">{{ item.name }}</span>
				<div style="clear: both"></div>
			</div>
			<div class="dabloue">
				<p>发布时间：</p>
				<span @click="sjclick(index1,item.name)" :class="index1 === tindex ? 'checkspan' : 'span'" v-for="(item, index1) in date"
				 checked="item.selected" :key="index1">{{ item.name }}</span>
				<div style="clear: both"></div>
			</div>
			<div class="dabloue">
				<p>资格要求：</p>
				<span @click="zgclick(index1,item.name)" :class="index1 === sindex ? 'checkspan' : 'span'" v-for="(item, index1) in fl"
				 checked="item.selected" :key="index1">{{ item.name }}</span>
				<div style="clear: both"></div>
			</div>
			<div class="dabloue">
				<p>人数要求：</p>
				<span @click="rsclick(index1,item.name)" :class="index1 === findex ? 'checkspan' : 'span'" v-for="(item, index1) in count"
				 checked="item.selected" :key="index1">{{ item.name }}</span>
				<div style="clear: both"></div>
			</div>
			<div class="bottom_dabloue">
				<div :class="showStatus === true ? 'checkdv' : 'dv'" @click="reaset">
					重置
				</div>
				<div :class="showstatus === true ? 'checkdv' : 'dv'" @click="sure">
					确定
				</div>
			</div>
		</view>

	</view>
</template>

<script>
	import JhjHeader from '@/components/jhj-header/jhj-header.vue'
	import BiddingListItem from './components/BiddingListItem.vue'
	import youScroll from '@/components/uni-list-scroll/you-scroll'
	import {
		getBiddingList,
		getBiddingList2
	} from '@/static/js/api/bidding.js';

	import api from '@/static/js/api.js'
	
	import {share} from '@/mixins/index.js'
	export default {
		mixins:[share],
		components: {
			JhjHeader,
			BiddingListItem,
			youScroll
		},
		data() {
			return {
				showStatus: false,
				showstatus: false,
				filterList: [{
					name: '企业'
				}, {
					name: '班组'
				}, {
					name: '全部分类'
				}],
				flag: false,
				index: 0,
				tindex: 0,
				sindex: 0,
				findex: 0,
				// 招标刑位
				floor: [{
						name: "全部",
						selected: false
					},
					{
						name: "公开招标",
						selected: false
					},
					{
						name: "邀请招标",
						selected: false
					},
				],
				// 发布时间
				date: [{
						name: "全部",
						selected: false
					},
					{
						name: "今天",
						selected: false
					},
					{
						name: "近三天",
						selected: false
					},
					{
						name: "近七天",
						selected: false
					},
					{
						name: "近两周",
						selected: false
					},
				],
				// 资格要求
				fl: [{
						name: "全部",
						selected: false
					},
					{
						name: "企业",
						selected: false
					},
					{
						name: "班组",
						selected: false
					},
				],

				// 人数
				count: [{
						name: "全部",
						selected: false
					},
					{
						name: "50以内",
						selected: false
					},
					{
						name: "50~99",
						selected: false
					},
					{
						name: "100~199",
						selected: false
					},
					{
						name: "200~499",
						selected: false
					},
					{
						name: "500以上",
						selected: false
					},
				],


				item: "",
				sitem: "",
				titem: "",
				fitem: "",
				select: false,
				searchList: [],
				biddinglist:[]
			}
		},
		mounted() {
			this.getdata()
		},
		methods: {
			lyclick(index, val) {
				this.index = index
				if (val === "全部") {
					val = ""
				}
				this.item = val
			},
			zgclick(index, val) {
				this.sindex = index
				if (val === "全部") {
					val = ""
				}
				this.sitem = val
			},
			sjclick(index, val) {
				this.tindex = index
				if (val === "全部") {
					val = ""
				}
				this.titem = val
			},
			rsclick(index, val) {
				this.findex = index
				if (val === "全部") {
					val = ""
				}
				this.fitem = val
			},
			sure() {
				this.flag = false;
				this.showstatus = !this.showstatus;
				setTimeout(() => {
					this.showstatus = false;
				}, 100);
				this.select = true;
				api.bindSearch('jhj.bidding.unusual', this.titem, this.item, this.sitem, this.fitem, "").then(res => {
					console.log(res)

					this.searchList = res.data
				})
			},
			getdata(){
				getBiddingList2(1,999).then(res => {
					this.biddinglist = res.data
				})
				// if(uni.getStorageSync('userInfo')){
				// 	getBiddingList(1,999).then(res => {
				// 		this.biddinglist = res.data
				// 	})
				// }else{
					
				// }
			},
			// 点击重置时，循环所有数组  把其状态归为初始状态
			reaset() {
				this.showStatus = !this.showStatus;
				setTimeout(() => {
					this.showStatus = false;
				}, 100);

				this.index = 0
				this.findex = 0
				this.tindex = 0
				this.sindex = 0
			},

			Showpopup() {
				this.flag = true
				// this.$refs.popup1.open();
			},
			getsearchdata(val){
				getBiddingList(1,999,val).then(res => {
					this.biddinglist = res.data
				})
			},
			clearname(){
				this.getdata()
			},
			flagS() {
				this.flag = false
			},

			goDetailPage(item, index) {
				uni.navigateTo({
					url: `/pages/home/bidding/BiddingDetailPage?id=${item.id}&type=${item.type}`
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.bidding-page {
		height: 100%;
		// position: relative;
		// overflow: hidden;
		background: #F4F5F9;
	}

	.propcenter {
		width: 100vw;
		height: 100vh;
		// background-color: #EEEEEE;
		background-color: rgba(0, 0, 0, .7);
		opacity: 0.5;
		position: fixed;
		top: 0;
		left: 0;
	}

	.prpop {
		width: 80%;
		height: 100vh;
		// opacity: 1;
		// background-color: #0000FF;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 99;
		background-color: #FFFFFF;
		border-radius: 20rpx 0 0 20rpx;

		.dabloue {
			margin: 40rpx;
		}

		.dabloue p {
			text-align: left;
			margin: 20rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #000000;
		}

		.dabloue .span {
			display: inline-block;
			margin: 10rpx;
			width: 150rpx;
			height: 70rpx;
			background: #F5F6F7;
			border-radius: 10rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			text-align: center;
			line-height: 70rpx;
			float: left;
		}

		.dabloue .checkspan {
			display: inline-block;
			margin: 10rpx;
			width: 150rpx;
			height: 70rpx;
			text-align: center;
			background: #DD524D;
			border-radius: 10rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffFFff;
			line-height: 70rpx;
			float: left;
		}

		.bottom_dabloue {
			width: 60%;
			height: 70rpx;
			position: absolute;
			bottom: 40rpx;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
		}

		.bottom_dabloue .dv {
			width: 50%;
			height: 100%;
			text-align: center;
			border-radius: 30rpx;
			line-height: 70rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
			background: #F5F6F7;
			margin: 0 10rpx;
		}

		.bottom_dabloue .checkdv {
			width: 50%;
			height: 100%;
			text-align: center;
			line-height: 70rpx;
			font-size: 32rpx;
			border-radius: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			background: #DD524D;
			margin: 0 10rpx;
		}
	}


	.page-header {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;

		// background: #fff;
		/deep/ .jhj-header-search {
			background-color: #FFFFFF;
		}
	}

	.content {
		// height: calc(100% - 140rpx);
		margin-top: 120rpx;
		overflow: hidden;
	}
	/deep/.u-action{
		display: none;
	}
</style>
